<template>

      
    <div class="shop-cart-wrapper">
          <!-- 购物车 -->
        <div class="shop-cart" @click="toggoleShowDetail">
            <div class="cart-left">
                    <div class="left-icon">
                        <i class="iconfont icon-qicheqianlian-select"  
                        ></i>
                        <i class="icon-top" v-if="totalCount">{{totalCount}}</i> 
                    </div>
                    <div class="left-price">
                    <div class="price-sum">￥{{totalPrice}}</div>
                    <div class="price-delivery">配送费￥{{0}}元</div>
                    </div>
            </div>
        <div :class="['cart-right',{ highlight: cartRightText === '去结算' } ]">
            {{ cartRightText }}
        </div>
        </div>
        <!-- 弹出层 -->
         <transition name="fade">
            <div class="shop-detail" v-show="isShowList">
                <div class="detail-wrapper">
                <h3 class="detail-header">
                    <div class="header-left">购物车</div>
                    <div class="header-right" @click.stop="toggleAlert">清空</div>
                </h3>
                <div class="detail-list-wrapper">
                    <ul class="detail-list">
                        <li
                            class="list-item"
                            v-for="(item, index) in cartList"
                            :key="index"
                        >
                            <div class="item-left">{{ item.name }}</div>
                            <div class="item-right">
                                <span class="right-price">￥{{ item.price }}</span>
                                <Button :food='item'></Button>
                            </div>
                            
                        </li>
                    </ul>
                </div>
                </div>
            </div>
        </transition>
    </div>

    
  
  
</template>

<script>
import { Dialog } from 'vant';
import { mapGetters, mapState} from 'vuex';
import Button from 'components/common/Button/Button.vue';
export default {
  components: { Button },
    data () {
        return {
             isShowDetail: false,//控制结算的显示与隐藏
        }
    },
    computed: {
        ...mapState({
            cartList:state=>state.shop.cartList,
            info:state=>state.shop.info
        }),
        ...mapGetters(['totalCount','totalPrice']) ,
        cartRightText() {
        let rest = this.totalPrice - this.info.minPrice
        if (this.totalPrice === 0) {
            return `￥${this.info.minPrice}元起送`
        } else if (rest >= 0) {
            return '去结算'
        } else {
            return `还差${Math.abs(rest)}元起送`
        }
        },
        isShowList() {
            if (this.totalCount === 0) {
                return false
            }
            return this.isShowDetail
            
        }
    },
    methods:{
        //有商品时点击左侧购物车
        toggoleShowDetail() {
            if (this.totalCount !== 0) {
                this.isShowDetail = !this.isShowDetail
                console.log(111);
            }
        },
        btn(some,item){
            this.$store.dispatch('updateFoodCount',{some,item})
        },
        //清空购物车
        toggleAlert(){
             Dialog.confirm({
                 message: '确定清除购物车么',
            })
            .then(() => {
                //清除购物车
                this.$store.dispatch('clearCart')
            })
            .catch(() => {
                // on cancel
            });
        }
    },
    
};
</script>

<style lang="less" scoped>
.shop-cart-wrapper{
  
    
    .shop-cart{
        height: 49px;
        width: 100%;
        background-color: black;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        display: flex;
        justify-content: space-between;
        .cart-left{
            display: flex;
            .left-icon{
                position: relative;
                top: -10px;
                right: -10px;
                height: 50px;
                width: 50px;
                border-radius: 50%;
                background-color: #ccc;
                .iconfont{
                    display: block;
                    font-size: 40px;
                }
            }
            .icon-top{
                position: relative;
                left: 30px;
                top: -50px;
                content: '';
                display:inline-block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: red;
                color: white;
                text-align: center;
            }
            .left-price{
                color: white;
                margin-left: 40px;
                .price-delivery{
                    color: #ccc;
                }
            }
        }
        .cart-right{
            width: 100px;
            height: 49px;
            color: white;
            line-height: 49px;
            text-align: center;
            background-color: rgb(48, 46, 46);
        }
    }
    .shop-detail{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        .detail-wrapper{
            position: fixed;
            left: 0;
            right: 0;
            bottom: 52px;
            background: #fff;
            z-index: 999;
            .detail-header{
                justify-content: space-between;
                display: flex;
                .header-left{
                    font-weight: 400;
                    color: black;
                    font-size: 16px;
                }
                .header-right{
                    font-size: 14px;
                    color: orange;
                    font-weight: 400;
                }
            }
            .list-item{
                padding: 10px;
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
                .item-left{
                    
                }
                .item-right{
                   display: flex;
                   color: red;
                   .right-price{
                       margin-right: 5px;
                   }
                    
                }
                
            }
            
        }
    }
}
.highlight{
    background-color: red !important;;
}
 
.list-item{
   
}
</style>

